import React, {useState, useRef, useEffect} from 'react'
// prettier-ignore
import {
  View,
  FlatList,
  Platform,
  RefreshControl,
} from 'react-native'
import PropTypes from 'prop-types'

import RxRefreshHeader from './RxRefreshHeader'

const RxFlatList = props => {
  const [pageNum, setPageNum] = useState(1)
  const [refreshing, setRefreshing] = useState(false)
  const [webRefreshing, setWebRefreshing] = useState(false)
  const [noMoreData, setNoMoreData] = useState(false)

  // prettier-ignore
  const {
    style,
    didMountRefresh,
    pageSize, onPullDown, onPullUp, itemSeparatorComponent,
    ...other
  } = props

  const refFlatList = useRef(null).current

  let first = true
  useEffect(() => {
    if (first) {
      if (didMountRefresh && onPullDown) {
        _pullDownRefresh()
      }
      first = false
    }
  })

  const _pullDownRefresh = () => {
    if (!onPullDown) return
    if (refreshing) {
      setRefreshing(false)
      setWebRefreshing(false)
    } else {
      const pageNo = 1
      setPageNum(pageNo)
      setRefreshing(true)
      setWebRefreshing(true)
      onPullDown(pageNo, pageSize)
        .then(e => {
          setRefreshing(false)
          setWebRefreshing(false)
          setNoMoreData(false)
        })
        .catch(() => {
          setRefreshing(false)
          setWebRefreshing(false)
          setNoMoreData(false)
        })
    }
  }

  const _pullUpRefresh = () => {
    if (!onPullUp) return
    if (!refreshing && !noMoreData) {
      const pageNo = pageNum + 1
      setPageNum(pageNo)
      setRefreshing(true)
      onPullUp(pageNo, pageSize)
        .then(noMoreData => {
          setRefreshing(false)
          setNoMoreData(noMoreData)
          // setWebRefreshing(false)
        })
        .catch(() => {
          setRefreshing(false)
          setNoMoreData(false)
          // setWebRefreshing(false)
        })
    }
  }

  const _refreshControl = () => {
    if (this.props.onPullDown) {
      if (Platform.OS === 'web') {
        return null
      }
      return (
        <RefreshControl
          // colors={['red']}   // Android 指示器颜色
          // tintColor={'blue'} // iOS 指示器颜色
          refreshing={e => setRefreshing(e)}
          onRefresh={_pullDownRefresh}
        />
      )
    }
  }

  return (
    <View style={style}>
      <RxRefreshHeader
        style={{marginBottom: 10}}
        refreshing={webRefreshing}
        onPress={() => {
          if (refFlatList && refFlatList.scrollToOffset) {
            refFlatList.scrollToOffset({animated: true, offset: 0})
          }
          _pullDownRefresh()
        }}
      />
      <FlatList
        {...other}
        ref={refFlatList}
        refreshControl={_refreshControl()}
        onEndReachedThreshold={0.2}
        onEndReached={_pullUpRefresh}
        ItemSeparatorComponent={itemSeparatorComponent}
      />
    </View>
  )
}

RxFlatList.propTypes = {
  ...FlatList.propTypes,
  pageSize: PropTypes.number,
  didMountRefresh: PropTypes.bool,
  onPullDown: PropTypes.func, // 返回promise
  onPullUp: PropTypes.func, // 返回promise,then返回是否没有更多数据
  emptyImage: PropTypes.any,
  emptyTitle: PropTypes.string,
  itemSeparatorComponent: PropTypes.func,
}

RxFlatList.defaultProps = {
  didMountRefresh: true,
  pageSize: 10,
}

export default RxFlatList
